<template>
  <div class="home-container">
    <!-- 顶部定位和搜索 -->
    <div class="location-search">
      <div class="location">
        <span>沈阳市规划大厦</span>
        <van-icon name="arrow-down" />
      </div>
      <div class="search-bar">
        <van-search
          v-model="searchValue"
          shape="round"
          placeholder="搜索商家、商品名称"
          background="transparent"
        />
      </div>
    </div>

    <!-- 分类导航 -->
    <div class="category-nav">
      <div class="category-item" v-for="type in businessTypes" :key="type.id" @click="goToBusinessList(type.id)">
        <div class="category-icon">
          <img :src="type.icon" :alt="type.name" />
        </div>
        <span>{{ type.name }}</span>
      </div>
    </div>

    <!-- 会员卡片 -->
    <div class="vip-card">
      <div class="vip-info">
        <span class="vip-title">超级会员</span>
        <span class="vip-desc">每月享超值权益</span>
      </div>
      <div class="vip-button">
        立即开通 >
      </div>
    </div>

    <!-- 商家列表 -->
    <div class="business-list">
      <div class="section-title">推荐商家</div>
      <div class="filter-bar">
        <span class="active">综合排序</span>
        <span>距离最近</span>
        <span>销量最高</span>
        <span>筛选<van-icon name="filter-o" /></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchValue = ref('')

const businessTypes = [
  { id: 1, name: '美食', icon: '/icons/food.png' },
  { id: 2, name: '早餐', icon: '/icons/breakfast.png' },
  { id: 3, name: '跑腿代购', icon: '/icons/delivery.png' },
  { id: 4, name: '汉堡披萨', icon: '/icons/burger.png' },
  { id: 5, name: '甜品饮品', icon: '/icons/dessert.png' },
  { id: 6, name: '速食简餐', icon: '/icons/fast-food.png' },
  { id: 7, name: '地方小吃', icon: '/icons/snack.png' },
  { id: 8, name: '米粉面馆', icon: '/icons/noodle.png' },
  { id: 9, name: '包子粥铺', icon: '/icons/bun.png' },
  { id: 10, name: '炸鸡炸串', icon: '/icons/fried.png' }
]

const goToBusinessList = (orderTypeId) => {
  router.push({
    name: 'business-list',
    query: {
      orderTypeId
    }
  })
}
</script>

<style scoped>
.home-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.location-search {
  background: #0097ff;
  padding: 8px 16px;
  color: #fff;
}

.location {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-bottom: 8px;
}

.search-bar {
  margin-bottom: 8px;
}

.category-nav {
  background: #fff;
  padding: 16px 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-row-gap: 16px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.category-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
}

.category-icon img {
  width: 100%;
  height: 100%;
}

.category-item span {
  font-size: 12px;
  color: #333;
}

.vip-card {
  margin: 12px;
  background: linear-gradient(90deg, #FFE7BA, #FFB000);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #874B00;
}

.vip-title {
  font-size: 18px;
  font-weight: bold;
  margin-right: 8px;
}

.vip-desc {
  font-size: 12px;
}

.vip-button {
  background: #874B00;
  color: #FFE7BA;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
}

.business-list {
  background: #fff;
  padding: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

.filter-bar {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  color: #666;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.filter-bar .active {
  color: #0097ff;
  font-weight: bold;
}

:deep(.van-search) {
  padding: 0;
}

:deep(.van-search__content) {
  background: #fff;
}
</style> 